import { memo, useState, useEffect, useRef, lazy,Suspense } from 'react'
import { message, Checkbox, Popconfirm } from 'antd'
import { DeleteOutlined, FormOutlined } from '@ant-design/icons'
import bus from '../../../../utils/eventBus'
import printSvg from '../../../../assets/system/print.svg'
import burnAdd from '../../../../assets/system/icon-add-burn.png'
import burnSvg from '../../../../assets/system/icon-burn.png'
import './index.scss'
const BurnDialog = lazy(()=>import('./BurnDialog'))
const EquipmentManagement = () => {
    const row = useRef<any>(null)
    const [burnVisible, setBurnVisible] = useState<boolean>(false)
    const [dialogShow, setDialogShow] = useState<boolean>(false)
    const [printData, setPrintData] = useState<any[]>([])
    const [burnData, setBurnData] = useState<any[]>([])
    const handleSuccess = () => {
        window.chromePro.getPrinterInfo();
    }
    const defaultPrintChange = (row: any) => {
        const data = [...printData]
        if (!row.check) {
            data.map(item => {
                if (item.printerName === row.printerName) {
                    item.check = true
                } else {
                    item.check = false
                }
            })
            setPrintData([...data])
            window.chromePro.modDefaultPrinter(
                JSON.stringify({
                    printer: row.printerName,
                })
            );
        } else {
            data.map(item => {
                if (item.printerName === row.printerName) {
                    item.check = false
                }
            })
            setPrintData([...data])
            window.chromePro.modDefaultPrinter(
                JSON.stringify({
                    printer: '',
                })
            );
        }
    }
    const defaultBurnChange = (row: any) => {
        const data = [...burnData]
        if (!row.check) {
            data.map(item => {
                if (item.id === row.id) {
                    item.check = true
                } else {
                    item.check = false
                }
            })
            setBurnData([...data])
            window.chromePro.modDefaultBurner(JSON.stringify({
                burner: row.id
            }));
        } else {
            data.map(item => {
                if (item.id === row.id) {
                    item.check = false
                }
            })
            setBurnData([...data])
            window.chromePro.modDefaultBurner(JSON.stringify({
                burner: ''
            }));
        }
    }
    const getDefaultPrinterFinished = (res: any) => {
        if (res.code === 200) {
            setPrintData((pre) => {
                const data = [...pre]
                data.map(item => {
                    if (item.printerName === res.defaultPrinter) {
                        item.check = true
                    }
                })
                return data
            })
        } else {
            message.error(res.msg);
        }
    }
    const delPrinterInfoFinished = () => {
        window.chromePro.getPrinterInfo();
    }
    const handleEdit = (data: any) => {
        row.current = data;
        setDialogShow(true)
    }
    const handleDelete = (item: any) => {
        // messageBox.confirm("确认删除该打印机设备？", "提示", {
        //     confirmButtonText: "确认",
        //     cancelButtonText: "取消",
        //     type: "warning",
        // })
        //     .then(() => {
        //         const params = { printerName: item.printerName };
        //         window.chromePro.delPrinterInfo(JSON.stringify(params));
        //     })
        //     .catch((err) => {
        //     });
    }
    // 获取打印机信息
    const getPrinterInfoFinished = (data: any) => {
        if (data.code === 200) {
            data.data.map((item: any) => {
                item.check = false
            })
            setPrintData(data.data)
        } else {
            message.error(data.msg);
        }
    }
    const handleBurnDelete = (data: any) => {
        const params = {
            id: data.id
        }
        window.chromePro.delNetBurnerInfo(JSON.stringify(params));
    }
    const delNetBurnerInfoFinished = (res: any) => {
        if (res.code === 200) {
            message.success(res.msg)
            getNetBurnerInfo()
            return
        }
        message.error(res.msg)
    }
    const handleBurnEdit = (data = undefined) => {
        row.current = data
        setBurnVisible(true)
    }
    const getNetBurnerInfoFinished = (res: any) => {
        if (res.code === 200) {
            res.data.map((item: any) => {
                item.check = false
            })
            setBurnData(res.data)
            setTimeout(() => {
                window.chromePro.getDefaultBurner();
            }, 200)
        } else {
            setBurnData([])
        }
    }
    const getNetBurnerInfo = () => {
        window.chromePro.getNetBurnerInfo();
    }
    const getDefaultBurnerFinished = (res: any) => {
        setBurnData((pre) => {
            const data = [...pre]
            if (res.code === 200) {
                data.map((item: any) => {
                    if (item.id === res.defaultBurner) {
                        item.check = true
                    }
                })
            }
            return data
        })
    }
    const modDefaultBurnerFinished = (res: any) => {
        if (res.code === 200) {
            message.success(res.msg)
        } else {
            message.error(res.msg)
        }
    }
    const modDefaultPrinterFinished = (res: any) => {
        if (res.code === 200) {
            message.success(res.msg)
        } else {
            message.error(res.msg)
        }
    }
    useEffect(() => {
        window.chromePro.getPrinterInfo();
        window.chromePro.getDefaultPrinter();
        getNetBurnerInfo()
        // 获取打印机信息
        bus.addListener("getPrinterInfoFinished", getPrinterInfoFinished);
        // 删除成功的信息
        bus.addListener("delPrinterInfoFinished", delPrinterInfoFinished);
        // 获取默认打印机
        bus.addListener("getDefaultPrinterFinished", getDefaultPrinterFinished);
        //删除刻录机
        bus.addListener('delNetBurnerInfoFinished', delNetBurnerInfoFinished)
        /**获取默认的刻录设备*/
        bus.addListener('getDefaultBurnerFinished', getDefaultBurnerFinished)
        /**设置默认刻录机设备*/
        bus.addListener('modDefaultBurnerFinished', modDefaultBurnerFinished)
        /**设置默认打印机设备*/
        bus.addListener("modDefaultPrinterFinished", modDefaultPrinterFinished)
        /**
         * 获取网络刻录机
        */
        bus.addListener('getNetBurnerInfoFinished', getNetBurnerInfoFinished)
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("getDefaultPrinterFinished", getDefaultPrinterFinished);
            // 获取打印机信息
            bus.removeListener("getPrinterInfoFinished", getPrinterInfoFinished);
            // 删除成功的信息
            bus.removeListener("delPrinterInfoFinished", delPrinterInfoFinished);
            bus.removeListener('getNetBurnerInfoFinished', getNetBurnerInfoFinished)
            bus.removeListener('delNetBurnerInfoFinished', delNetBurnerInfoFinished)
            bus.removeListener('getDefaultBurnerFinished', getDefaultBurnerFinished)
            bus.removeListener('modDefaultBurnerFinished', modDefaultBurnerFinished)
            bus.removeListener("modDefaultPrinterFinished", modDefaultPrinterFinished)
        }
    }, [])
    return (
        <>
            <div className="equipment-box">
                <div className="header">
                    <span style={{ fontSize: '18px', color: '#333333', fontWeight: 600 }}>打印机设备</span>
                    <span style={{ color: '#b5b5b5', fontSize: '14px', marginLeft: '14px' }}>共 {printData.length}
                        台设备</span>
                </div>
                <div className="print">
                    {printData.map((item: any, index: number) => {
                        return (
                            <div className="print-box" key={item.printerId}>
                                <div className="action-btn">
                                    <Checkbox checked={item.check} onChange={() => defaultPrintChange(item)}></Checkbox>
                                </div>
                                <div className="info-top">
                                    <img src={printSvg} />
                                    <div className="ip">
                                        <span>IP/ID</span>
                                        <span title={item.printerId}>{item.printerId}</span>
                                    </div>
                                </div>
                                <div className="info-center">
                                    {item.printerName}
                                </div>
                            </div>
                        )
                    })}
                </div>
                <div className="header burn-header">
                    <span style={{ fontSize: '18px', color: '#333333', fontWeight: 600, display: 'inline-block', minWidth: ' 90px' }}>刻录机设备</span>
                    <span style={{ color: '#b5b5b5', fontSize: '14px', marginLeft: '14px' }}>共 {burnData.length}
                        台设备</span>
                </div>
                <div className="burn">
                    <div className="burn-add-box">
                        <img src={burnAdd} className="add-icon" onClick={() => handleBurnEdit(undefined)} />
                    </div>
                    {burnData.map((item: any) => {
                        return (
                            <div className="burn-box" key={item.id}>
                                <div className="action-btn">
                                    <Popconfirm
                                        title='确定要删除改刻录机设备？'
                                        onConfirm={() => handleBurnDelete(item)}
                                        okText="确定"
                                        cancelText="取消"
                                    >
                                        <DeleteOutlined title="删除" />
                                    </Popconfirm>
                                    <FormOutlined title="编辑" onClick={() => handleBurnEdit(item)} />
                                    <Checkbox checked={item.check} onChange={() => defaultBurnChange(item)}></Checkbox>
                                </div>
                                <div className="info-top">
                                    <img src={burnSvg} />
                                    <div className="ip">
                                        <span>IP</span>
                                        <span title={item.ip}>{item.ip}</span>
                                    </div>
                                </div>
                                <div className="info-center" title={item.name}>
                                    {item.name}
                                </div>
                            </div>
                        )
                    })}
                </div>

            </div >
            <Suspense>
            {burnVisible ? <BurnDialog row={row.current} refresh={getNetBurnerInfo} close={() => setBurnVisible(false)}></BurnDialog> : null}
            </Suspense>
        </>
    )
}

export default memo(EquipmentManagement)